<template>
	<view class="page">
		<view class="header-section">
			<view class="header-content">
				<view class="title">基础处理</view>
				<view class="subtitle">专业的图片基础处理工具</view>
			</view>
		</view>
		
		<view class="tools-section">
			<view class="tools-grid">
				<!-- 图片裁剪 -->
				<view class="grid-item" @click="clipImg">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">图片裁剪</text>
					<text class="grid-desc">智能裁剪处理</text>
				</view>
				
				<!-- 图片压缩 -->
				<view class="grid-item" @click="compressImg">
					<image src="../../static/images/home/compress.svg" class="grid-icon"></image>
					<text class="grid-title">图片压缩</text>
					<text class="grid-desc">高效压缩减小</text>
				</view>
				
				<!-- 尺寸裁剪 -->
				<view class="grid-item" @click="toSizeClip">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">尺寸裁剪</text>
					<text class="grid-desc">精确尺寸裁剪</text>
				</view>
				
				<!-- 圆形裁剪 -->
				<view class="grid-item" @click="toCircleCrop">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">圆形裁剪</text>
					<text class="grid-desc">圆形椭圆裁剪</text>
				</view>
				
				<!-- 格式转换 -->
				<view class="grid-item" @click="toFormatConvert">
					<image src="../../static/images/home/convert.svg" class="grid-icon"></image>
					<text class="grid-title">格式转换</text>
					<text class="grid-desc">转换图片格式</text>
				</view>
				
				<!-- 旋转翻转 -->
				<view class="grid-item" @click="toRotateFlip">
					<image src="../../static/images/home/clip.svg" class="grid-icon"></image>
					<text class="grid-title">旋转翻转</text>
					<text class="grid-desc">旋转翻转图片</text>
				</view>
				
				<!-- 亮度调节 -->
				<view class="grid-item" @click="toLightAdjust">
					<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
					<text class="grid-title">亮度调节</text>
					<text class="grid-desc">调节亮度对比度</text>
				</view>
				
				<!-- 色温调节 -->
				<view class="grid-item" @click="toColorTemperature">
					<image src="../../static/images/home/filters.svg" class="grid-icon"></image>
					<text class="grid-title">色温调节</text>
					<text class="grid-desc">调节图片色温</text>
				</view>
				
				<!-- 图片信息 -->
				<view class="grid-item" @click="toImageInfo">
					<image src="../../static/images/common/sc.png" class="grid-icon"></image>
					<text class="grid-title">图片信息</text>
					<text class="grid-desc">查看图片详情</text>
				</view>
				
				<!-- 批量压缩 -->
				<view class="grid-item" @click="toBatchCompress">
					<image src="../../static/images/home/compress.svg" class="grid-icon"></image>
					<text class="grid-title">批量压缩</text>
					<text class="grid-desc">多图批量压缩</text>
				</view>
				
				<!-- 批量格式转换 -->
				<view class="grid-item" @click="toBatchFormat">
					<image src="../../static/images/home/convert.svg" class="grid-icon"></image>
					<text class="grid-title">批量格式转换</text>
					<text class="grid-desc">批量转换格式</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods: {
			// 图片裁剪
			clipImg() {
				this.selectImage('clipImg')
			},
			
			// 图片压缩
			compressImg() {
				this.selectImage('compressImg')
			},
			
			// 尺寸裁剪
			toSizeClip() {
				this.selectImage('sizeClip')
			},
			
			// 圆形裁剪
			toCircleCrop() {
				this.selectImage('circleCrop')
			},
			
			// 格式转换
			toFormatConvert() {
				this.selectImage('formatConvert')
			},
			
			// 旋转翻转
			toRotateFlip() {
				this.selectImage('rotateFlip')
			},
			
			// 亮度调节
			toLightAdjust() {
				this.selectImage('lightAdjust')
			},
			
			// 色温调节
			toColorTemperature() {
				this.selectImage('colorTemperature')
			},
			
			// 图片信息
			toImageInfo() {
				this.selectImage('imageInfo')
			},
			
			// 批量压缩
			toBatchCompress() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchCompress/batchCompress'
				})
			},
			
			// 批量格式转换
			toBatchFormat() {
				uni.navigateTo({
					url: '/subPackages/imageTools/batchFormat/batchFormat'
				})
			},
			
			// 选择图片并跳转到对应功能
			selectImage(toolName) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePath = res.tempFiles[0].tempFilePath
						uni.navigateTo({
							url: `/subPackages/imageTools/${toolName}/${toolName}?imageUrl=${encodeURIComponent(tempFilePath)}`
						})
					},
					fail: (err) => {
						console.log('选择图片失败:', err)
						uni.showToast({
							title: '请先选择图片',
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page {
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	min-height: 100vh;
	padding-bottom: 120rpx;
}

.header-section {
	padding: 80rpx 40rpx 60rpx;
	text-align: center;
	color: white;
	
	.title {
		font-size: 56rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}
	
	.subtitle {
		font-size: 28rpx;
		opacity: 0.8;
	}
}

.tools-section {
	padding: 0 30rpx;
	
	.tools-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25rpx;
		
		.grid-item {
			background: white;
			border-radius: 20rpx;
			padding: 40rpx 30rpx;
			text-align: center;
			box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
			transition: all 0.3s ease;
			
			&:active {
				transform: translateY(5rpx);
				box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.2);
			}
			
			.grid-icon {
				width: 80rpx;
				height: 80rpx;
				margin-bottom: 20rpx;
			}
			
			.grid-title {
				display: block;
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
			}
			
			.grid-desc {
				display: block;
				font-size: 24rpx;
				color: #666;
				line-height: 1.4;
			}
		}
	}
}
</style>